<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>注册平台</title>
		<link rel="shortcut icon" href="img/log_img/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="css/register.css">
	</head>

	<body style="background-image: url(img/log_img/login-bg2.jpg);background-size:100%;background-repeat: no-repeat;">
		<div class="layui-main user" style="margin-top: 100px" id="registerMain">
			<div class="layui-clear main" >
				<div class="layui-logo">
					<h1 style="color: white;font-size: 35px;font-family: "宋体";">小租租</h1>
				</div>
				<fieldset class="layui-elem-field layui-field-title">
					<legend class="text-white">注册平台</legend>
				</fieldset>
				<div class="layui-form layui-form-pane">
					
					<div class="layui-form">
						<div class="layui-form-item">
							<input name="userName" class="layui-input" id="userName" placeholder="请输入用户名" type="text"  lay-verify="required" autofocus="autofocus" autocomplete="off">
						</div>
						<div class="layui-form-item">
							<input name="tel" class="layui-input" id="tel" placeholder="请输入手机号" type="text" maxlength="11" lay-verify="required|phone|regexit" autofocus="autofocus" autocomplete="off">
						</div>
						<div class="layui-form-item">
							<input name="password" class="layui-input" id="password" placeholder="请输入密码" type="password" maxlength="20" lay-verify="required|pwd" autocomplete="off">
						</div>
						<div class="layui-form-item">
							<input id="oldpassword" class="layui-input" placeholder="请再次输入密码" type="password" maxlength="20" lay-verify="required|rePwd" autocomplete="off" >
						</div>
						<!-- <div class="layui-form-item form_code">
							<input id="code" class="layui-input" placeholder="请输入图片验证码" type="text" maxlength="6" lay-verify="required|code">
							<div class="code"><img id="refCode_reg_img" width="120" height="38"></div>
						</div> -->
						 <div class="layui-form-item form_code">
							<input id="register-code" class="layui-input" placeholder="请输入短信验证码" type="text" maxlength="4" lay-verify="required">
							<div class="code">
								<button id="codebutton"  type="button" class="layui-btn layui-btn-normal tel-btn" style="width: 120px;">获取验证码</button>
							</div>
						</div> 
						<div class="layui-form-item" style="float: left;margin-left: -10px;">
							<input lay-filter="agreen-checkbox" title="我同意" type="checkbox" lay-skin="primary" checked>
							<a href="#" target="_blank">《注册协议》</a>
						</div>
						<!-- <div class="layui-form-item">
							 <button id="reg" type="submit"  class="login_btn layui-btn layui-btn-radius layui-btn-normal" lay-submit  lay-filter="register" >立即注册</button>
							
						</div> -->
						<div class="layui-form-item" >
						    
						      <button id="registerId" class="login_btn layui-btn layui-btn-radius layui-btn-normal"  lay-submit lay-filter="formDemo" >立即提交</button>
						      
						    
						  </div> 
						 
						<div>
							<small class="text-white">已经有账户了？</small>
							<a href="login">点此登录</a>
						</div>
					</div>
					
				</div>
			</div>
		</div>
	</body>

	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="layui/layui.all.js"></script>
	<script type="text/javascript" src="js/register.js"></script>
	<script type="text/javascript">
	/* 注册点击事件 */	
	$(function(){
			/* 点击注册按钮触发 */
			$("#registerMain").on("click","#registerId",doSaveRegister) ;
			$(".code").on("click","#codebutton",getCode) ;
			$(".layui-form-item").on("blur","#oldpassword",checkedPassword) ;
			
		} )
		
		
		
		/* 保存注册数据 */
		function doSaveRegister(){
			let url="/register/saveRegister";
			let userName=$(".layui-form-item #userName").val();
			let password=$(".layui-form-item #password").val();
			let tel=$(".layui-form-item #tel").val();
			let code=$(".layui-form-item #register-code").val();
			let two=$(".layui-form-item #oldpassword").val();
			if(password!=two){
				alert("两次密码不一致");
				return;
			}
			let params=({"userName":userName,"password":password,"tel":tel,"code":code});
			if(userName==null||password==null||tel==null||userName==""||password==""||tel==""||code=="")return;
			$.post(url,params,function(result){
				
				/*注册成功  */
				if(result.state==1){
					doLogin();
				}
				else{
					/*  注册失败*/
					alert(result.message);
				}
			})
		}
		
		function doLogin(){
			let rBody=$("#registerMain");
			rBody.empty();
			rBody.append(`<div class='jumpLogin' >
							<span>注册成功，请点击</span>
							<a href='/login'>登陆</a>
						</div>`)
		}
		
		//获取验证码方法
		function getCode(){
			let url="/register/getCode";
			let tel=$(".layui-form-item #tel").val();
			let params={"tel": tel};
			$.post(url,params,function(result){
				if(result.state==1){
					alert(result.message);
				}
				else{
					alert(result.message);
				}
			})
		}
		
		
		function checkedPassword(){
			let one=$(".layui-form-item #password").val();
			let two=$(".layui-form-item #oldpassword").val();
			if(one!=two){
				alert("两次密码不一致");
			}
		}	
		
	</script>
</html>